<template>
  <div id="map-container"></div>
</template>
<script>
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import 'ol/ol.css';
import VectorSource from 'ol/source/Vector';
import HeatmapLayer from 'ol/layer/Heatmap';
import GeoJSON from 'ol/format/GeoJSON'

export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

export default {
  data() {
    return {
      map:null,
      //热力图的数据格式
      data: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [120.430070, 31.938140],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [120.428570, 31.939100],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [120.429530, 31.941680],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [120.431240, 31.943580],
            },
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [120.432410, 31.944820],
            },
          },
        ],
      }

    }
  },
  mounted(){
    this.initMap() // 加载矢量底图
  },
  methods:{
    initMap() {
      const KEY = '你申请的KEY'

      this.map = new Map({
        target: 'map-container',
        layers: [
          // 底图
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
              layer: 'vec', // 矢量底图
              matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影
              style: "default",
              crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加
              format: "tiles", //请求的图层格式，这里指定为瓦片格式
              wrapX: true, // 允许地图在 X 方向重复（环绕）
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
              })
            })
          }),
          // 标注
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
              layer: 'cva', //矢量注记
              matrixSet: 'c',
              style: "default",
              crossOrigin: 'anonymous',
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']
              })
            })
          })
        ],
        view: new View({
          center: [120.430070,31.938140],
          projection: projection,
          zoom: 16,
          maxZoom: 17,
          minZoom: 1
        }),
        //加载控件到地图容器中
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      });
      this.addHeatMap();
    },
    addHeatMap(){
      const heatMapLayer = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(this.data),
        }),
        zIndex: 9, // 图层的 z-index，决定图层的渲染顺序
        opacity: 0.5, // 图层的不透明度，范围在 0 到 1 之间
        visible: true, // 图层的可见性，默认为 true
        extent: undefined, // 渲染的边界范围，默认为 undefined
        minResolution: undefined, // 图层可见的最小分辨率，默认为 undefined
        maxResolution: undefined, // 图层可见的最大分辨率，默认为 undefined
        minZoom: undefined, // 图层可见的最小缩放级别，默认为 undefined
        maxZoom: undefined, // 图层可见的最大缩放级别，默认为 undefined
        // gradient: ["#6d00be", "#f53300", "#ff9900"], // 热力图的颜色渐变
        radius: 30, // 热点半径，单位为像素
        blur: 30, // 模糊尺寸，单位为像素
        weight: 'weight', // 用于权重的特征属性或返回权重的函数，默认为 'weight'
        properties: {}, // 任意可观察的属性，可以使用 #get() 和 #set() 方法访问，默认为空对象
        className: 'ol-layer', // 图层元素的 CSS 类名，默认为 'ol-layer'
      })
      this.map.addLayer(heatMapLayer)
    }
  }
}
</script>
<style scoped>
#map-container {
  width: 100%;
  height: 100vh;
}
</style>
